<!-- eslint-disable prettier/prettier -->
<template>
  <div class="management">
    <div class="manage-header">
      <div class="manage-left">
        <LeftOutlined class="left-out" @click="onBack" />
        <div class="manage-title" @click="onBack">值班记录详情</div>
      </div>
      <div class="manage-title-font">
        {{ rotaInfo.rotaName }}
      </div>
    </div>

    <div class="calender">
      <a-calendar v-model:value="value" @select="onCalSelect">
        <template #headerRender="object">
          <div class="cal-header">
            <div class="cal-left">
              <div class="arrow-item" @click="getPreMonth(object)">
                <LeftOutlined class="arrow" />
              </div>
              <span ref="exDate" class="arrow-date">{{
                object.value.format("YYYY年MM月")
              }}</span>
              <div class="arrow-item" @click="getNextMonth(object)">
                <RightOutlined class="arrow" />
              </div>
            </div>
            <div class="cal-right">
              <a-button type="normal" @click="ExportVisible = true"
                >值班记录导出</a-button
              >
            </div>
          </div>
        </template>

        <template #dateFullCellRender="object">
          <div class="curr-cal">
            <div class="curr-title">{{ object.current.format("DD") }}</div>
            <div v-for="(item, index) of calList" :key="index">
              <div class="curr-group">
                <div class="curr-back" @click="onCalBack()"></div>
                <div
                  class="curr-content"
                  v-if="item.dutyDate === object.current.format('YYYY-MM-DD')"
                >
                  <a-popover
                    v-model:visible="visibleList[obj.id]"
                    trigger="click"
                    placement="right"
                    v-for="(obj, index) of item.records"
                    :key="index"
                  >
                    <template #content>
                      <div class="popver-content">
                        <div
                          class="popver-top"
                          :style="{
                            background: obj.unusualFlg ? '#f29435' : '#3E77FA',
                          }"
                        >
                          <div class="popver-button">
                            <CloseOutlined
                              class="icon-close"
                              @click="visibleList[obj.id] = false"
                            />
                          </div>
                          <div class="popver-title">
                            <div class="popver-name">{{ obj.personName }}</div>
                            <div class="popver-position">
                              {{ obj.dutyRole == 1 ? "值班领导" : "值班人员" }}
                            </div>
                          </div>
                        </div>
                        <div class="popver-bottom">
                          <div class="popver-tel">
                            <div class="popver-label">异常情况：</div>
                            <div class="popver-contact">
                              {{ obj.unusualFlg ? "有异常" : "无异常" }}
                            </div>
                          </div>
                          <div class="popver-tel" style="margin-top: 24px">
                            <div class="popver-label">异常详情：</div>
                            <div class="popver-contact">
                              {{ obj.recordContent || "-" }}
                            </div>
                          </div>
                        </div>
                      </div>
                    </template>
                    <div class="curr-item curr-org">
                      {{
                        obj.dutyRole == 1
                          ? "领导." + obj.personName
                          : "人员." + obj.personName
                      }}
                      {{ obj.recordFlg ? `(已提交)` : `(未提交)` }}
                    </div>
                  </a-popover>
                </div>
              </div>
            </div>
          </div>
        </template>
      </a-calendar>
    </div>

    <a-modal
      v-model:visible="titleVisible"
      @ok="handleOk"
      :destroyOnClose="true"
      title="修改名称"
      width="540px"
      :maskClosable="false"
      @cancel="handleCancel"
    >
      <template #footer>
        <div style="padding-bottom: 20px; margin-top: 48px">
          <a-button key="back" @click="handleCancel">取消</a-button>
          <a-button key="submit" type="primary" @click="handleOk"
            >确认</a-button
          >
        </div>
      </template>
      <div class="title-input">
        <a-input v-model:value="formTitle" style="width: 444px" />
      </div>
    </a-modal>

    <a-modal
      v-model:visible="descVisible"
      @ok="handleRemarkOk"
      :destroyOnClose="true"
      title="值班说明"
      width="540px"
    >
      <template #footer>
        <div style="padding-bottom: 20px; margin-top: 48px">
          <a-button key="back" @click="handleCancel">取消</a-button>
          <a-button key="submit" type="primary" @click="handleRemarkOk"
            >确认</a-button
          >
        </div>
      </template>
      <div class="desc-textarea">
        <a-textarea
          v-model:value="formState.rotaTips"
          style="width: 444px; height: 184px"
        />
      </div>
    </a-modal>

    <a-modal
      v-model:visible="importVisible"
      @ok="handleOk"
      :destroyOnClose="true"
      title="导入值班表"
      width="540px"
    >
      <template #footer>
        <div style="padding-bottom: 20px; margin-top: 48px">
          <a-button key="back" @click="handleCancel">取消</a-button>
          <a-button key="submit" type="primary" @click="handleImportOk"
            >确认</a-button
          >
        </div>
      </template>

      <div class="import-moban" @click="onDownloadMoban">
        下载Excel模版：<span
          >通用课表模版.xls<DownloadOutlined id="download"
        /></span>
      </div>
      <a-upload-dragger
        v-if="fileList.length == 0"
        v-model:fileList="fileList"
        name="file"
        :showUploadList="false"
        :before-upload="beforeUpload"
        @change="handleChange"
      >
        <p class="ant-upload-drag-icon" style="margin-bottom: 10.75px">
          <svg-icon icon-class="import" class="icon-import" />
        </p>
        <p class="ant-upload-text" style="margin-bottom: 6px">
          点击或将文件拖拽到这里上传
        </p>
        <p class="ant-upload-hint">支持扩展名：xls、xlsx</p>
      </a-upload-dragger>
      <div class="import-list" v-else>
        <div class="import-status">
          <div class="import-status-left">
            <svg-icon icon-class="status" class="icon-status" />
            <span class="status-font">成功.xlsx</span>
          </div>
          <div class="import-right" @click="fileList = []">重新上传</div>
        </div>
        <div class="import-error" v-if="errorList.length > 0">
          <div class="error-title">
            <InfoCircleOutlined class="icon-info" /><span
              class="error-title-font"
              >信息不匹配</span
            >
          </div>
          <div class="error-info">
            <span>第xx、xx行，日期格式不正确</span>
          </div>
        </div>
      </div>
    </a-modal>
    <a-modal
      v-model:visible="ExportVisible"
      title="值班记录导出"
      @ok="handleOk"
      :destroyOnClose="true"
      :maskClosable="false"
      @cancel="handleCancel"
    >
      <template #footer>
        <div style="padding-bottom: 20px">
          <a-button key="back" @click="ExportVisible = false">取消</a-button>
          <a-button key="submit" type="primary" @click="onExport"
            >确认</a-button
          >
        </div>
      </template>
      <a-form
        ref="formRef"
        :model="formState"
        :rules="rules"
        :label-col="labelCol"
        style="margin-top: 20px"
      >
        <a-form-item label="时间范围" required name="rotaTime">
          <a-range-picker
            v-model:value="formState.rotaTime"
            style="width: 320px"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<!-- eslint-disable prettier/prettier -->
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useRoute } from "vue-router";
import { message } from "ant-design-vue";
import {
  addRotaSingleInfo,
  editRota,
  getRecordList,
  exportRota,
  exportRotaMoban,
  importRota,
  // getRecordToday,
} from "@/service/modules/rota/rota";
import {
  LeftOutlined,
  RightOutlined,
  CloseOutlined,
  DownloadOutlined,
  InfoCircleOutlined,
} from "@ant-design/icons-vue";

const route = useRoute();
const rotaInfo = ref<any>({});
const visible = ref(false);
const titleVisible = ref(false);
const descVisible = ref(false);
const importVisible = ref(false);
const ExportVisible = ref(false);
const formState: any = reactive({
  rotaTips: "",
  rotaTime: "",
});
const visibleList = ref<any>({});
const formTitle = ref<any>("");
const fileList = ref([]);
const errorList = ref([]);
const value = ref("");
const exDate = ref<any>(null);

onMounted(() => {
  getInfo();
});

const getInfo = () => {
  const id: any = route.query.i;
  addRotaSingleInfo(id).then((res) => {
    rotaInfo.value = res.data;
    getList();
  });
};

const getDate = (date: any) => {
  const curr = new Date(date);
  const year = curr.getFullYear();
  const month = curr.getMonth();
  const pre = `${year}-${month}`;
  const now = `${year}-${month + 1}`;
  const next = `${year}-${month + 2}`;
  return { pre, now, next };
};

const currDate = ref(getDate(new Date()).now);
const calList = ref<any>([]);
const getList = () => {
  const id: any = route.query.i;
  const params = {
    rotaId: id,
    beginDate: rotaInfo.value.rotaBegin,
    endDate: rotaInfo.value.rotaEnd,
  };
  getRecordList(params).then((res: any) => {
    calList.value = res.rows;
  });
};

const getDateFormat = (date: any) => {
  const now = new Date(date);
  const year = now.getFullYear();
  const month = now.getMonth() + 1;
  const day = now.getDate();
  return `${year}-${month}-${day}`;
};

const getMonthStartEnd = (date: any) => {
  var now = new Date(date); // 获取当前日期时间
  var monthStart = new Date(now.getFullYear(), now.getMonth(), 1); // 获取本月第一天的日期时间
  var monthEnd = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
  return {
    monthStart,
    monthEnd,
  };
};

const handleOk = () => {
  const id: any = route.query.i;
  editRota({
    id,
    rotaName: formTitle.value,
  }).then((res: any) => {
    if (res.code === 0) {
      getInfo();
      message.success(res.msg || "操作成功！");
      titleVisible.value = false;
    }
  });
};

const handleRemarkOk = () => {
  const id: any = route.query.i;
  editRota({
    id,
    rotaTips: formState.rotaTips,
  }).then((res: any) => {
    if (res.code === 0) {
      getInfo();
      message.success(res.msg || "操作成功！");
      handleCancel();
    }
  });
};

const handleImportOk = () => {
  const id: any = route.query.i;
  importRota(id, formFile.value).then((res: any) => {
    message.success(res.msg || "操作成功！");
    handleCancel();
  });
};

const handleCancel = () => {
  visible.value = false;
  titleVisible.value = false;
  descVisible.value = false;
  importVisible.value = false;
};

const onCalBack = () => {
  visible.value = true;
};

const onBack = () => {
  history.back();
};

const onCalSelect = (date: any) => {
  calValue = getDateFormat(date);
};

const formFile = ref<any>();
const beforeUpload = (file: any) => {
  formFile.value = file;
  return false;
};

const handleChange = () => {};

const onExport = () => {
  const date = getMonthStartEnd(currDate.value);
  const id: any = route.query.i;
  exportRota({
    rotaId: id,
    beginDate: getDateFormat(date.monthStart),
    endDate: getDateFormat(date.monthEnd),
  }).then((res) => {
    formState.rotaTime = "";
    ExportVisible.value = false;
    message.success("导出成功");
    downloadBlobFlow(
      res,
      "application/vnd.ms-excel;charset=utf-8",
      "值班记录表.xls"
    );
  });
};

const onDownloadMoban = () => {
  exportRotaMoban().then((res) => {
    console.log(res);
  });
};

const downloadBlobFlow = (res: any, type: string, filename: string) => {
  const blob = new Blob([res], {
    type: type,
  });
  const a = document.createElement("a");
  const URL = window.URL || window.webkitURL;
  const herf = URL.createObjectURL(blob);
  a.href = herf;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  window.URL.revokeObjectURL(herf);
};

const getNextMonth = (obj: any) => {
  const date = getDate(obj.value);
  currDate.value = date.next;
  obj.onChange(obj.value.add(1, "months"));
  getList();
};

const getPreMonth = (obj: any) => {
  const date = getDate(obj.value);
  currDate.value = date.pre;
  obj.onChange(obj.value.add(-1, "months"));
  getList();
};
</script>
<!-- eslint-disable prettier/prettier -->
<style scoped lang="less">
.management {
  width: 1616px;
  height: 828px;
  background: #ffffff;
  border-radius: 10px;
  padding: 0px 24px;
}

.manage-left {
  display: flex;
  align-items: center;
}

.manage-title {
  width: 100px;
  height: 64px;
  font-size: 16px;
  font-family: Microsoft YaHei UI, Microsoft YaHei UI-600;
  font-weight: 600;
  color: #303233;
  line-height: 64px;
  cursor: pointer;
}

.left-out {
  font-size: 12px;
  margin-left: 6px;
  margin-right: 10px;
  font-weight: 800;
  cursor: pointer;
}

.manage-title-font {
  height: 28px;
  font-size: 18px;
  font-family: Arial, Arial-700;
  font-weight: 700;
  text-align: left;
  color: #303233;
  line-height: 28px;
  letter-spacing: 0.09px;
  display: flex;
  align-items: center;
}
.manage-desc {
  height: 24px;
  font-size: 14px;
  font-family: Microsoft YaHei UI, Microsoft YaHei UI-400;
  font-weight: 400;
  text-align: LEFT;
  color: #aaaeb2;
  line-height: 24px;
  letter-spacing: 0.07px;
  margin-top: 12px;
  span {
    color: #3e77fa;
    cursor: pointer;
  }
}
.edit {
  font-size: 14px;
  color: #3e77fa;
  margin-left: 12px;
  cursor: pointer;
}

.calender {
  margin-top: 21px;
}

.cal-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}
.cal-left {
  display: flex;
  align-items: center;
  .arrow-date {
    margin: 0 16px;
    font-size: 16px;
    font-family: Arial, Arial-700;
    font-weight: 700;
    text-align: left;
    color: #303233;
    line-height: 21px;
    letter-spacing: 0.08px;
  }
}
.arrow-item {
  width: 32px;
  height: 32px;
  background: #ffffff;
  border: 1px solid #eaeaea;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 12px;
}

.curr-cal {
  width: 100.3%;
  height: 100%;
  border-top: 1px solid #eaeaea;
  border-right: 1px solid #eaeaea;
  .curr-title {
    padding: 4px 8px;
    text-align: left;
    font-size: 14px;
    font-family: Arial, Arial-400;
    font-weight: 400;
    text-align: LEFT;
    line-height: 22px;
    letter-spacing: 0.07px;
  }
  .curr-group {
    width: 100%;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    overflow-y: auto;
    position: relative;
    &::-webkit-scrollbar {
      width: 0px;
    }
    .curr-item {
      z-index: 3;
      height: 24px;
      width: 216px;
      text-align: left;
      font-size: 14px;
      font-family: Microsoft YaHei UI, Microsoft YaHei UI-400;
      font-weight: 400;
      color: #303233;
      padding: 3px 31px 2px 12px;
      border-radius: 4px;
      margin-bottom: 3px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .curr-org {
      background: rgba(247, 151, 54, 0.1);
      position: relative;
      &::before {
        content: "";
        position: absolute;
        width: 3px;
        height: 24px;
        background: #f79736;
        border-radius: 4px 0px 0px 4px;
        top: 0px;
        left: 0px;
      }
    }
    .curr-blue {
      background: rgba(62, 119, 250, 0.1);
      position: relative;
      &::before {
        content: "";
        position: absolute;
        width: 3px;
        height: 24px;
        background: #3e77fa;
        border-radius: 4px 0px 0px 4px;
        top: 0px;
        left: 0px;
      }
    }
  }
}

.import-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 444px;
  height: 80px;
  border-radius: 4px;
  background: #f4f6f8;
  padding: 20px 16px;
  .import-status-left {
    display: flex;
    align-items: center;
    margin-left: 8px;
  }
}
.icon-status {
  width: 40px;
  height: 40px;
  .status-font {
    font-size: 14px;
    font-family: Microsoft YaHei UI, Microsoft YaHei UI-400;
    font-weight: 400;
    text-align: LEFT;
    color: #303233;
    line-height: 20px;
    letter-spacing: 0.07px;
  }
}

.import-right {
  font-size: 14px;
  font-family: Microsoft YaHei UI, Microsoft YaHei UI-400;
  font-weight: 400;
  text-align: LEFT;
  color: #3e77fa;
  line-height: 20px;
  letter-spacing: 0.07px;
  cursor: pointer;
}

.import-error {
  margin-top: 24px;
  .error-title {
    display: flex;
    align-items: center;
    .icon-info {
      color: #f2983d;
      font-size: 14px;
    }
    .error-title-font {
      margin-left: 9px;
    }
  }
  .error-info {
    margin-left: 24px;
    font-size: 12px;
    font-family: Microsoft YaHei UI, Microsoft YaHei UI-400;
    font-weight: 400;
    text-align: LEFT;
    color: #aaaeb2;
    line-height: 18px;
    letter-spacing: 0.06px;
    margin-top: 4px;
  }
}

.select-header-group {
  display: flex;
  font-size: 14px;
  font-family: Microsoft YaHei UI, Microsoft YaHei UI-400;
  font-weight: 400;
  text-align: left;
  color: #919599;
  line-height: 32px;
  letter-spacing: 0.07px;
  text-align: left;
  .select-header-item {
    flex: 1;
  }
}

#download {
  font-size: 16px;
  color: #3e77fa;
  margin-left: 4px;
}

.icon-import {
  width: 40px;
  height: 40px;
}

.import-moban {
  font-size: 14px;
  font-family: Microsoft YaHei UI, Microsoft YaHei UI-400;
  font-weight: 400;
  text-align: LEFT;
  color: #303233;
  line-height: 22px;
  letter-spacing: 0.07px;
  margin-bottom: 27px;
  cursor: pointer;
  span {
    font-size: 14px;
    font-family: Microsoft YaHei UI, Microsoft YaHei UI-400;
    font-weight: 400;
    text-align: LEFT;
    color: #3e77fa;
    line-height: 22px;
    letter-spacing: 0.07px;
  }
}

.select-select-group {
  display: flex;
  font-size: 14px;
  font-family: Microsoft YaHei UI, Microsoft YaHei UI-400;
  font-weight: 400;
  text-align: left;
  color: black;
  line-height: 32px;
  letter-spacing: 0.07px;
  text-align: left;
  .select-select-item {
    flex: 1;
  }
}
.curr-back {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 80px;
  z-index: 2;
}

.popver-content {
  width: 420px;
  // height: 152px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  .popver-top {
    position: relative;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding-bottom: 8px;
  }
  .popver-blue {
    background-color: #3e77fa;
  }
  .popver-org {
    background-color: #f29435;
  }
  .popver-bottom {
    flex: 1;
    padding: 24px;
    height: auto;
    .popver-tel {
      display: flex;
    }
    .popver-label {
      font-size: 14px;
      font-family: Microsoft YaHei UI, Microsoft YaHei UI-400;
      font-weight: 400;
      text-align: LEFT;
      color: #aaaeb2;
      line-height: 22px;
      letter-spacing: 0.07px;
    }
    .popver-contact {
      font-size: 14px;
      font-family: Arial, Arial-400;
      font-weight: 400;
      text-align: LEFT;
      color: #303233;
      line-height: 22px;
      letter-spacing: 0.07px;
    }
  }
}
.popver-button {
  position: absolute;
  right: 0px;
  top: 0px;
  display: flex;
}
.icon-delete {
  color: white;
  font-size: 16px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.icon-close {
  color: white;
  font-size: 16px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.popver-title {
  padding: 24px 24px 0 24px;
  .popver-name {
    font-size: 18px;
    font-family: Microsoft YaHei UI, Microsoft YaHei UI-700;
    font-weight: 700;
    text-align: LEFT;
    color: #ffffff;
    line-height: 28px;
    letter-spacing: 0.09px;
  }
  .popver-position {
    font-size: 14px;
    font-family: Microsoft YaHei UI, Microsoft YaHei UI-400;
    font-weight: 400;
    text-align: LEFT;
    color: #ffffff;
    line-height: 22px;
    letter-spacing: 0.07px;
  }
}

.title-input {
  width: 100%;
  display: flex;
  justify-content: center;
}
.desc-textarea {
  width: 100%;
  display: flex;
  justify-content: center;
}

/deep/ .ant-form-item {
  padding-bottom: 32px !important;
  margin-bottom: 0px !important;
  &:nth-child(3) {
    padding-bottom: 0 !important;
  }
}
/deep/ .ant-picker-content th {
  height: 56px !important;
  background: #ffffff;
  border-right: 1px solid #eaeaea;
  border-radius: 8px 8px 0px 0px;
  text-align: center;
  line-height: 37px !important;
  font-size: 14px;
  color: #616266;
  font-weight: 700;
  &:nth-child(7) {
    border-right: 0px;
  }
}
/deep/ .ant-picker-calendar-full .ant-picker-panel .ant-picker-body th:before {
  content: "周";
  font-size: 14px;
  font-family: Microsoft YaHei UI, Microsoft YaHei UI-700;
  font-weight: 700;
  text-align: LEFT;
  color: #616266;
  line-height: 56px;
}
/deep/ .ant-picker-content {
  width: 1558px !important;
  margin-left: 2px;
  height: 604px;
  border-radius: 8px !important;
  box-shadow: 0px 0px 2px #ccc;
}

/deep/ .ant-picker-panel {
  overflow-y: auto;
  overflow-x: hidden;
  height: 604px;
  &::-webkit-scrollbar {
    width: 0px;
  }
}

/deep/ .ant-popover-inner-content {
  padding: 0 !important;
}
</style>
